import './CommonMenu.scss'
import { useState } from 'react'
import { useEventEmitter, useMount, useUpdateEffect } from 'ahooks'

import { refreshStore } from '../Config/zustand'
import { DevextremeTemplate } from '../Utils/Devextreme'
import { PageTopOptions } from '../Utils/PageAssembly'
import { getMenuConfig, emitFunction, menuRefresh, getInitData } from '../Utils/TableConfig'

const ColumnOptions = ({ data, fields }) => [
    { title: '待审核列表', modalType: 'model', page: 'TableSelect', width: '80vw', data: { type: 'UnregisteredList', init: data } },
    {
        title: '报表管理',
        modalType: 'model',
        width: '90vw',
        page: 'FromExcel',
        data: { url: { get: 'getCostMonthDetailCompanyExcel', pos: 'posCostMonthUploadCostMonthDetailCompany', params: { uuid: data.uuid } } }
    },
    {
        title: '报表预览',
        modalType: 'model',
        width: '90vw',
        page: 'FromExcel',
        data: { url: { get: 'getCostMonthCompanyReportPDF', params: { uuid: data.uuid } } }
    },
    { title: '审核流程', modalType: 'model', width: 800, page: 'GetApprovalDetail', data }
]



// 默认页码配置
const pageConfig = { url: 'getCostMonthApprovalDetail', page: 'CostMonthA02' }


const CostMonthA02 = () => {
    const DevEvent = useEventEmitter()
    const { refresh } = refreshStore()
    const [total, setTotal] = useState(0)
    const [Pagina, setPagina] = useState({ pageIndex: 1, pageSize: 10000 })
    const [Config, setConfig] = useState()
    const [dataSource, setDataSource] = useState()
    const [sortData, setSortData] = useState({})
    const [searchData, setSearchData] = useState({})

    const refreshData = async (paging) => getInitData({ url: pageConfig.url, paging, setTotal, setDataSource })
    useUpdateEffect(() => { menuRefresh({ Pagina, setTotal, setDataSource, setPagina, refreshData }) }, [refresh])
    DevEvent.useSubscription(val => emitFunction({ val, Pagina, sortData, searchData, setSortData, setSearchData, setPagina, refreshData }))

    useMount(() => {
        getMenuConfig({ config: pageConfig.page, setPagina, setConfig })
        getInitData({ url: pageConfig.url, paging: Pagina, setTotal, setDataSource })
    })

    return (
        <div className='CommonMenu CostMonthA02'>
            <div className='Right'>
                {Config && dataSource &&
                    <>
                        <div className='Top'>
                            <PageTopOptions Config={Config} DevEvent={DevEvent} searchData={searchData} />
                        </div>
                        <div className='Table'>
                            <DevextremeTemplate
                                dataSource={dataSource}
                                config={Config}
                                DevEvent={DevEvent}
                                ColumnOptions={ColumnOptions}
                            />
                        </div>
                    </>
                }
            </div>
        </div>
    );
};

export default CostMonthA02;